<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>发布 - 树洞社区</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/community.css}">
    <link rel="stylesheet" th:href="@{/css/editormd.min.css}">
    <script th:src="@{/js/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/layui/layui.js}" type="application/javascript"></script>
    <script th:src="@{/js/comment.js}" type="application/javascript"></script>
    <script th:src="@{/js/editormd.js}" type="application/javascript"></script>
    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
    <script type="application/javascript">
        layui.use(['element','form','layer'],function () {
            var element = layui.element;
            var layer = layui.layer;
            var form = layui.form;
            form.on('select(column1)', function(data){
                if(data.value == 1){
                    layer.tips('为了得到更多人更加准确的回答，请务必保证问题详尽且清楚哦~', '#publish-select',{tips:1,time:10000});
                }else if(data.value == 2){
                    layer.tips('欢迎分享干货，好的帖子，大家可能会为你点赞加分哦！', '#publish-select',{tips:1,time:10000});
                }else if(data.value == 3){
                    layer.tips('有好建议，放肆提，一起完善社区！采纳后会收到站长的么么哒哦(づ￣ 3￣)づ', '#publish-select',{tips:1,time:10000});
                }else if(data.value == 4){
                    layer.tips('讨论是一种快速学习，加深印象的方法哦~', '#publish-select',{tips:1,time:10000});
                }else if(data.value == 5){
                    layer.tips('新闻动态，科技前沿，可以选这里哦！', '#publish-select',{tips:1,time:10000});
                }
            });
        });

        function tagCheck(value) {
            for ( var i = 0; i <value.length; i++){
                if(!value[i]){
                    return true;
                }
            }
            return false;
        }

        function publishCheck() {
            layui.use('layer',function () {
                var layer = layui.layer;
                var title = $("#title").val();
                var description = $("#description").val();
                var tag = $("#tag").val();
                var id = $("#id").val();
                var options= $("#column option:selected");
                // var tagSplit = tag.split(",");
                if(!title){
                    layer.msg("标题不能为空");
                }else if(title.length >50){
                    layer.msg("标题最多50个字符");
                }else if(!description){
                    layer.msg("内容不能为空");
                }else if(!tag) {
                    layer.msg("标签不能为空");
                    // }else if(tagCheck(tagSplit)){
                    //     layer.msg("标签含有多余的逗号");
                    // }else if(tagSplit.length >10){
                    //     layer.msg("标签最多只能选择10个");
                    // }
                }else if(!options.val()){
                    layer.msg("请选择专栏");
                }else{
                    var captcha1 = new TencentCaptcha('2077491291', function(res) {
                        if(res.ret == 0){
                            $.ajax({
                                type:"post",
                                url:"/checkCaptcha",
                                contentType:"application/json",
                                data:JSON.stringify({
                                    "ticket":res.ticket,
                                    "randstr":res.randstr
                                }),
                                success:function (result) {
                                    if(result.code == 200) {
                                        $.ajax({
                                            type:"post",
                                            url:"/publish",
                                            contentType:"application/json",
                                            data:JSON.stringify({
                                                "id":id,
                                                "title":title,
                                                "description":description,
                                                'tag':tag,
                                                "type":options.val()
                                            }),
                                            success:function (result) {
                                                if(result.code == 200){
                                                    window.location.href="/";
                                                }else if(result.code == 2016){
                                                    layer.msg(result.message);
                                                }
                                            },
                                            dataType:"json"
                                        });
                                    }else{
                                        layer.msg(result.message);
                                    }
                                },
                                dataType:"json"
                            });
                        }
                    });
                    captcha1.show(); // 显示验证码
                }
            });
        }
    </script>
</head>
<body>
<div th:replace="navigation :: nav"></div>
<div class="layui-container tree-marginTop">
    <div class="tree-panel publish-panel" style="padding-top: 5px;">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">发表新帖</li>
            </ul>
            <div class="layui-tab-content" style="padding: 20px 0;">
                <div class="layui-tab-item layui-show">
                    <div class="layui-form layui-form-pane">
                        <div class="layui-row layui-col-space15 layui-form-item">
                            <input type="hidden" id="id" th:value="${question.id}">
                            <div class="">
                                <label for="title" class="layui-form-label">标题</label>
                                <div class="layui-input-block">
                                    <input type="text" id="title" name="title" autocomplete="off"
                                           class="layui-input" th:value="${question.title}">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <div id="question-editor" class="layui-input-block">
                                <textarea name="description" id="description" class="form-control" cols="30" rows="10"
                                          style="display:none;" th:text="${question.description}"></textarea>
                            </div>
                        </div>
                        <script type="text/javascript">
                            $(function () {
                                var editor = editormd("question-editor", {
                                    width: "100%",
                                    height: 350,
                                    path: "/js/lib/",
                                    delay: 0,
                                    emoji:true,
                                    watch: false,
                                    placeholder: "请输入内容",
                                    imageUpload: true,
                                    imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                                    imageUploadURL: "/file/upload",
                                });
                            });
                        </script>
                        <div class="layui-form-item ">
                            <label for="tag">添加标签:</label>
                            <input type="text" name="tag" id="tag" class="layui-input" placeholder="填写标签"
                                   autocomplete="off" th:value="${question.tag}" >
<!--                                   onclick="showSelectTag()">-->
<!--                            <div id="select-tag" class="layui-tab publish-tag-tab">-->
<!--                                <ul class="layui-tab-title">-->
<!--                                    <li th:each="selectCategory,selectCategoryStat:${tags}"-->
<!--                                        th:class="${selectCategoryStat.first ? 'layui-this':''}">-->
<!--                                        <a th:href="${'#'+selectCategory.categoryName}"-->
<!--                                           data-toggle="tab" th:text="${selectCategory.categoryName}"></a>-->
<!--                                    </li>-->
<!--                                </ul>-->
<!--                                <div class="layui-tab-content">-->
<!--                                    <div th:id="${selectCategory.categoryName}" th:each="selectCategory:${tags}"-->
<!--                                         th:class="${selectCategoryStat.first ? 'layui-tab-item layui-show':'layui-tab-item'}">-->
<!--                                        <span class="community-tag" th:each="selectTag:${selectCategory.tags}" onclick="selectTag(this)"-->
<!--                                              th:data-tag="${selectTag}"-->
<!--                                              th:text="${selectTag}">-->
<!--                                        </span>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">所在专栏</label>
                            <div class="layui-input-block" style="width: 190px;" id="publish-select">
                                <select id="column" name="column" lay-filter="column1">
                                    <option></option>
                                    <option value="1" th:selected="${question.type == 1?'true':'false'}">情感交流</option>
                                    <option value="2" th:selected="${question.type == 2?'true':'false'}">生活分享</option>
                                    <option value="3" th:selected="${question.type == 3?'true':'false'}">互帮互助</option>
                                    <option value="4" th:selected="${question.type == 4?'true':'false'}">学习讨论</option>
                                    <option value="5" th:selected="${question.type == 5?'true':'false'}">好友动态</option>
                                    <option value="6" th:selected="${question.type == 6?'true':'false'}">二手交易</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item btn-hover">
                            <button class="layui-btn" onclick="publishCheck()">立即发布</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:replace="footer :: foot"></div>
</body>
</html>